<template>
<view class="">
	<view class="clueHistory_box" v-if="isHistory">
		<view class="">

			<view class="clueHistory_box_list" v-for="(item,index) in historyList" :key="item.deptId">
				<view class="clueHistory_box_list_com" >
					<view class="list_ul">
						<!-- <view class="list_li">
							<view class="followUp_form" style="font-weight: 600;">
								{{item.followUpMsg}}
							</view>
							
							<!-- <view class="followUp_info" v-if="item.followStatus == '新建'">{{item.salesmanName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.followStatus}}</view> -->
							<!-- <view class="followUp_info" v-if="item.followUpMsg == '线索分配' || item.followUpMsg == '派发线索'">{{item.createTime | dataFormat}}</view>	
							<view class="followUp_info" v-else-if="item.followStatus == '计划中' || item.followStatus == '已完成' || item.followStatus == '已取消'">{{item.salesmanName}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.followStatus}}&nbsp;&nbsp;&nbsp;&nbsp;{{item.updateTime | dataFormat}}</view> 
						</view> -->

						<view class="list_li" v-if="item.followPurposesList">
							<view v-for="(childitem,childindex) in item.followPurposesList" :key="childindex">
								<view style="font-size:30rpx;margin-bottom:6rpx; Source Han Sans CN;font-weight: 600;">{{childitem}}</view>
								<view class="followUp_purpose" >{{childitem}}</view>
							</view>
							
						</view>
						<view class="list_li" style="color: #69687D;font-size: 26rpx;" v-if="item.promiseShop">
							客户意愿：客户承诺到店
						</view>
						<view class="list_li" v-if="item.remark">
							{{item.remark ? item.remark : ''}}
						</view>	
						<view class="list_li" v-if="item.followUpMsg=='线索分配'">
							线索被销售经理【{{item.salesManagerName}}】分配给【{{item.salesmanName}}】
						</view>

					</view>
					<view class="arrowdownup_list" >
						<view class="arrowdownup_list_item" v-if="item.updateTime">
							<view class="fontsty1">跟进时间:</view>
							<view class="fontsty1" >{{item.updateTime | dataFormat}}</view>
						</view>
						<view class="arrowdownup_list_item"   v-if="item.invalidReasons && item.invalidReasons.length">
							<view class="fontsty1">战败原因:</view>
							<view class="fontsty1" >{{item.invalidReasons | invalidReasonsData }}</view>
						</view>
						<view class="arrowdownup_list_item"  v-if="item.salesmanName">
							<view class="fontsty1">重点备注:</view>
							<view class="fontsty1" >{{item.followUpMsg}}</view>
						</view>
					</view>
					<view class="arrowdownup_list" v-if="item.isArrowdownup">
						<view class="arrowdownup_list_item" v-if="item.salesmanName">
							<view class="fontsty1">跟进顾问:</view>
							<view class="fontsty1" >{{item.salesmanName}}</view>
						</view>

						<view class="arrowdownup_list_item" >
							<view class="fontsty1">预计成交时间:</view>
							<view class="fontsty1">{{item.estTranTime | dataFormat1}}</view>
						</view>	
						<view class="arrowdownup_list_item" v-if="item.intentCarBrand && item.intentCarModel && item.intentCarStyle">
							<view class="fontsty1">意向车型:</view>
							<view class="fontsty1" >{{item.intentCarModel+ '/'+item.intentCarStyle}}</view>
						</view>
						<view class="arrowdownup_list_item" >
							<view class="fontsty1">线索来源:</view>
							<view class="fontsty1">
							{{item.firstChannelName==null?'':'/'}}
							{{item.secondChannelName}}
							</view>
						</view>
						<!-- <view class="arrowdownup_list_item">
							<view class="fontsty1">二级渠道</view>
							<view class="fontsty1" style="opacity: 0.7;">{{item.secondChannelName}}</view>
						</view> -->
						<view class="arrowdownup_list_item" >
							<view class="fontsty1">活动名称:</view>
							<!-- <view class="fontsty1" style="opacity: 0.7;">{{item.activityId | activity}}</view> -->
							<view class="fontsty1">{{item.activityName}}</view>
						</view>
						<view class="arrowdownup_list_item" >
							<view class="fontsty1">竞争对手:</view>
							<view class="fontsty1" >{{item.competitor}}</view>
						</view>
						<view class="arrowdownup_list_item" >
							<view class="fontsty1">竞争车型:</view>
							<view class="fontsty1" >{{item.compModel}}</view>
						</view>
						<view class="arrowdownup_list_item" v-if="item.ownerName">
							<view class="fontsty1">申请人:</view>
							<view class="fontsty1" >{{item.ownerName}}</view>
						</view>

						<view class="arrowdownup_list_item1" v-if="item.remark">
							<view class="fontsty1">申请人备注:</view>
							<view class="fontsty2">
								{{item.remark}}
							</view>
						</view>
					</view>
					<view class="operation_box">
						<view v-if="userInfo.role=='150' && item.followStatus=='计划中' && item.followUpMsg !='线索分配'" class="operation_box_sty editFollowUp" @click="edit_follow(item,'编辑')">
							<uni-icons class="rightIcon" color="#3B86FF" size="14" type="compose" />
							<view style="font-size: 28rpx">
								编辑
							</view>
						</view>
						<view v-if="item.followUpMsg=='战败审批' && item.followStatus=='已完成'" class="operation_box_sty arrowdownup" @click="arrow_downup(item,index)">审批详情<u-icon class="uview_icon" :name="item.isArrowdownup?'arrow-up-fill':'arrow-down-fill'" color="#A1A0AE" size="22"></u-icon></view>
						<view v-if="item.followUpMsg=='来店面谈' && item.followStatus=='已完成'" class="operation_box_sty arrowdownup" @click="arrow_downup(item,index)">{{item.isArrowdownup?"收起":"更多"}}<u-icon class="uview_icon" :name="item.isArrowdownup?'arrow-up-fill':'arrow-down-fill'" color="#A1A0AE" size="22"></u-icon></view>
						<view v-if="item.followUpMsg=='店外会面' && item.followStatus=='已完成'" class="operation_box_sty arrowdownup" @click="arrow_downup(item,index)">{{item.isArrowdownup?"收起":"更多"}}<u-icon class="uview_icon" :name="item.isArrowdownup?'arrow-up-fill':'arrow-down-fill'" color="#A1A0AE" size="22"></u-icon></view>
						<view v-if="item.followUpMsg=='电话跟进' && item.followStatus=='已完成'" class="operation_box_sty arrowdownup" @click="arrow_downup(item,index)">{{item.isArrowdownup?"收起":"更多"}}
							<u-icon class="uview_icon" :name="item.isArrowdownup?'arrow-up-fill':'arrow-down-fill'" color="#A1A0AE" size="22"></u-icon>
						</view>
						<view v-if="item.followUpMsg=='信息跟进' && item.followStatus=='已完成'" class="operation_box_sty arrowdownup" @click="arrow_downup(item,index)">{{item.isArrowdownup?"收起":"更多"}}<u-icon class="uview_icon" :name="item.isArrowdownup?'arrow-up-fill':'arrow-down-fill'" color="#A1A0AE" size="22"></u-icon></view>
						<view v-if="item.followUpMsg=='派发线索'" class="operation_box_sty arrowdownup" style="width: 120px;" @click="oneclueClick(item)">唯一线索详情</view>
						<!-- <view v-if="item.followUpMsg=='派发线索'" class="operation_box_sty arrowdownup" style="width: 100px;" @click="arrow_downup(item,index)">更多信息<uni-icons style="color: #3B86FF;margin-left: 10rpx;" :type="item.isArrowdownup?'arrowup':'arrowdown'" size="14" /></view> -->
					</view>					
				
				</view>	
				<view class="lineType">
					<view :class="['lineTypeGrade',item.intentionLevel] ">{{item.intentionLevel}}</view>
					<view class="line_time" v-if="item.intentionLevel">{{item.updateTime | lineFormat}}</view>
				</view>
			</view>
		</view>
		<view class="line"></view>
	
	</view>
	<view class="clueHistory_box1" v-else>
		<image class="iconImg"  src="@/static/images/nohistory.png"></image>
		<view class="txt">
			还没有人跟进哦~
		</view>
		<view class="box1_but" v-if="userInfo.role=='150'" @click="set_up_clue">
			<!-- <uni-icons type="plusempty" color="#FFFFFF" size="16" /> -->
			立即跟进
		</view>
	</view>
	
	<!-- 销售经理 148-->
	<view class="clueHistorybut" v-if="userInfo.role=='148' && isHistory && historyunique.clueStatus=='已派发'" @click="cueAllocationFun">
		线索分配
	</view>
	<!-- 销售顾问 150-->
<!-- 	<view class="clueHistorybut1" v-if="userInfo.role=='150'">
		<view style="color: #3B86FF;font-size: 32rpx;">跟进形式</view>
		<view class="iconImg">
			<image @click.stop="showOperation('phone')" src="@/static/images/telephone_atv.png"></image>
		</view>
		<view class="iconImg">
			<image  @click.stop="showOperation('sms')" src="@/static/images/mail_atv.png"></image>
		</view>
		<view class="iconImg">
			<image @click.stop="showOperation('come_shop')" src="@/static/images/information_atv.png"></image>
		</view>
		<view class="iconImg">
			<image @click.stop="showOperation('outside_shop')" src="@/static/images/maillist_atv.png"></image>
		</view>
	</view> -->
	<show-modal v-if="isShowModal" :showType="showType" :isPopup="isShowModal" :popUpContent="showmodedata"  :showModalOperation.sync="isShowModal"/>
</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	import {
		getollowPage
	} from '@/service/api/api.js';
	import {
		parseTime
	} from "@/common/util.js"
	import showModal from "@/components/showModal/index.vue";
	export default {
		name: 'UniDrawer',
		props: {
			/**
			 * 显示状态
			 */
			// visible: {
			// 	type: Boolean,
			// 	default: false
			// },
			historyunique:{
				type:Object
			}
			
		},
		components: {
			uniIcons,showModal
		},
		data() {
			return {
				userInfo: {},
				// isArrowdownup:false,//更多信息状态
				historyList:[],//历史跟进数据
				isHistory:true,
				isShowModal: false,
				showType:"call",
				showmodedata:{},
				ids:[],
				
			}
		},
		filters: {
			dataFormat(val) {
				// return parseTime(val, '{y}-{m}-{d} {h}:{i}')
				return parseTime(val, '{m}-{d} {h}:{i}')
			},
			dataFormat1(val) {
				// return parseTime(val, '{y}-{m}-{d} {h}:{i}')
				return parseTime(val, '{m}-{d}')
			},
			lineFormat(val){
				return parseTime(val, '{m}.{d}')
			},
			invalidReasonsData(val){
				let str=''
				if(val || val.length){
					for (var i = 0; i < val.length; i++) {
						str+=val[i]+'/'
					}
					str=str.slice(0,str.length-1)
				}
				
				return str
			}
		},
		onLoad(e) {
			this.isShowModal=false
			try {
				this.userInfo = uni.getStorageSync('user_info')
				
			} catch (e) {
				console.log(e)
			}
		},
		onShow(){
			this.isShowModal=false
			this.ids=[]
			// this.init()
		},
		watch: {
			historyList(newVal){
				this.historyList=newVal
			}
		},
		created() {
			this.userInfo = uni.getStorageSync('user_info')
			console.log(this.historyunique,"线索详情 参数  phone uniqueId followNum")
			this.showmodedata={
				id:this.historyunique.id,
				mobile:this.historyunique.phone,
				uniqueId:this.historyunique.uniqueId,
				followNum: this.historyunique.followNum,
				clueStatus: this.historyunique.clueStatus
			}
			this.init()
			// console.log(this.userInfo)
		},
		methods: {
			// 销售经理 线索分配
			cueAllocationFun(){
				if(this.historyunique.clueStatus=='已派发'){
					uni.setStorageSync('assignIds', this.historyunique.id)
					// console.log(this.historyunique.id)
					uni.navigateTo({
						url: `/pages/clue/manager/allocation/index`
					})
				}

			},
			//编辑跟进
			edit_follow(e,clueStatus){
				console.log(e,"编辑")
				uni.navigateTo({
					// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
					url: `/pages/clue/clueFollowUp/index?id=${e.id}&uniqueId=${e.uniqueId}&followUp=${e.followUp}&followNum=${e.followNum || 0}&followPurposes=${e.followPurposes}&clueStatus=${this.historyunique.clueStatus}`
				})
			},
			//创建跟进线索
			set_up_clue(){
				console.log(this.historyunique,"创建线索跟进")
				uni.navigateTo({
					// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数,followPurposes 目的
					url: `/pages/clue/clueFollowUp/index?uniqueId=${this.historyunique.uniqueId}`
				})
			},
			//控制  意向信息的展开和隐藏
			arrow_downup(item,index){
				// console.log(item,index,this.historyList[index])
				// this.historyList[index].isArrowdownup=!this.historyList[index].isArrowdownup
				this.$set(this.historyList[index],'isArrowdownup',!this.historyList[index].isArrowdownup)
				this.$forceUpdate()
			},
			//弹出框
			showModalOperation(type) {
				console.log()
				this.isShowModal = type
			},
			//唯一线索跳转到  唯一线索详情
			oneclueClick(e){
				console.log(e,"唯一线索跳转到  唯一线索详情")
				uni.navigateTo({
					url: `/pages/clue/clueDetails/index?id=${this.historyunique.id}&phone=${this.historyunique.phone}&followNum=${e.followNum || 0}&tabIdx=1&clueStatus=已分配`
				})
			},
			//拨打电话 发短信 其他跳转
			showOperation(e, val){
				switch (e){
					case 'phone':
						this.showType='phone'
						this.popUpContent = {
							id:this.historyunique.id,
							uniqueId: this.historyunique.uniqueId,
							mobile: this.historyunique.phone,
							followNum: this.historyunique.followNum,
							clueStatus: this.historyunique.clueStatus
						}
						this.isShowModal=true
						break;
					case 'sms':
						this.showType='sms'
						this.popUpContent = {
							id:this.historyunique.id,
							uniqueId: this.historyunique.uniqueId,
							mobile: this.historyunique.phone,
							followNum: this.historyunique.followNum,
							clueStatus: this.historyunique.clueStatus
						}
						this.isShowModal=true
						break;
					case 'come_shop':
						uni.redirectTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数
							// id=${this.historyunique.id}&
							url: `/pages/clue/clueFollowUp/index?uniqueId=${this.historyunique.uniqueId}&followNum=${this.historyunique.followNum || 0}&followUp=${e}&clueStatus=${this.historyunique.clueStatus}`
						})
						break;
					case 'outside_shop':
						uni.redirectTo({
							// id 跟进id, uniqueId 唯一id, followUp 形式, followNum 跟进次数
							// id=${this.historyunique.id}&
							url: `/pages/clue/clueFollowUp/index?uniqueId=${this.historyunique.uniqueId}&followNum=${this.historyunique.followNum || 0}&followUp=${e}&clueStatus=${this.historyunique.clueStatus}`
						})
						break;
					default:
						break;
				}
			},

			//ajax 请求
			
			init(){
				this.getollowPage()
			},
			//跟进历史
			async getollowPage(){
				// this.historyunique.uniqueId
				let res=await getollowPage({id:this.historyunique.id})			
				if(res.data.code==0){		
					
					if(res.data.data.content){
						if(res.data.data.content.length==0){
							this.isHistory=false
						}else{
							this.isHistory=true
						}
					}
			
					this.historyList=res.data.data.content
					console.log(this.historyList,"-----------------跟进历史数据")
					
					// console.log(this.historyunique)

					this.historyList=this.historyList.map((v,i)=>{
						v.isArrowdownup=false
						// this.ids.push(v.id)
						return v
					})
				
				
				}else{
					this.isHistory=false
					
				}
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.scss'
</style>
